<template>
  <!--证书-->
  <div class="certificate">
    <!--面包屑导航-->
    <div class="breadcrumbBox clearFloat">
      <div class="lf">当前位置：</div>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="lf">
        <el-breadcrumb-item :to="{ path: '/user' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>我的证书</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="zs" v-if="companyName!=null&&companyName!=''">
      <img src="@/assets/logo.jpg" alt="" class="zs-logo">
      <p class="zs-title">南京市环境保护认证证书</p>
      <div class="zs-nr">
        <span> {{companyName}} </span>
        单位，在&nbsp;{{NTime}}&nbsp;年&nbsp;{{YTime}}&nbsp;月&nbsp;{{RTime}}&nbsp;日登录南京市环境保护在线教育系统，完成&nbsp;16&nbsp;学时生态文明与环境教育在线课程学习，并通过考试，特此证明。
      </div>
      <span class="zs-dw">发放单位：南京市生态环境局</span>
      <span class="zs-time">发放时间：{{nTime}}年{{yTime}}月{{rTime}}日</span>
      <img src="@/assets/images/user/z.png" alt="" class="zs-z">
      <div class="zs-q" id="flow-img"></div>
    </div>
    <!--<img src="@/assets/images/user/certificate.png" alt="" style="width: 1200px;">-->
  </div>
</template>

<script>
  function ConverToDate(date,type) {
    var chinese = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
    var y = date
    var m = date
    var d = date
    var result = "";
    if(type ==1) {
      for (var i = 0; i < y.length; i++) {
        result += chinese[y.charAt(i)];
      }
    }else if(type==2) {
      if (m.length == 2) {
        if (m.charAt(0) == "1") {
          result += ("十" + chinese[m.charAt(1)]);
        }else {
          result += (chinese[m.charAt(1)]);
        }
      } else {
        result += (chinese[m.charAt(0)]);
      }
    }else {
      if (d.length == 2) {
        if (d.charAt(0) == "1") {
          result += ("十" + chinese[d.charAt(1)]);
        }else if(d.charAt(0) == "0") {
          result += (chinese[d.charAt(1)]);
        }else if(d.charAt(1) != "0") {
          result += (chinese[d.charAt(0)] + '十' + chinese[d.charAt(1)]);
        }else {
          result += (chinese[d.charAt(0)] + '十' )
        }
      } else {
        result += (chinese[d.charAt(0)]);
      }
    }
    return result;
  }
  import {queryCertificate,examRecordqrcode} from '@/request/api'
  export default {
    name: '',
    data () {
      return {
        companyName: '',
        nTime: '',
        yTime: '',
        rTime: '',
        NTime: '',
        YTime: '',
        RTime: '',
      }
    },
    created() {
      this.getCertificate()
    },
    methods: {
//        查询证书生成二维码
        getCertificate() {
          queryCertificate({memberId:JSON.parse(localStorage.getItem('userInfo')).id}).then(res=> {
            if(res.code==200) {
              if(res.data.certNo!=''&&res.data.certNo!=null) {
                  this.companyName = res.data.companyName
                let time = res.data.createTime.split(' ')[0]
                this.nTime = time.split('-')[0]
                this.yTime = time.split('-')[1]
                this.rTime = time.split('-')[2]
                this.NTime = ConverToDate(this.nTime,1)
                this.YTime = ConverToDate(this.yTime,2)
                this.RTime = ConverToDate(this.rTime,3)
                let formData = new FormData();
                formData.append("content", JSON.parse(localStorage.getItem('userInfo')).id);
                examRecordqrcode(formData).then(res1=> {
                  var img = document.createElement('img')
                  const myBlob = new window.Blob([res1], {type: 'image/jpeg'})
                  const qrUrl = window.URL.createObjectURL(myBlob)
                  img.src = qrUrl
                  img.onload = function () {
                    window.URL.revokeObjectURL(qrUrl)
                  }
                  const imgDiv = document.querySelector('#flow-img')
                  imgDiv.appendChild(img)
                })
              }else {
                this.$message({
                  message: '暂无证书',
                  type: 'info',
                  offset: '500'
                })
              }
            }
          })
        },
//      toPath() {
//        this.$router.push({
//          name:'seriesInfo'
//        })
//      },
    }
  }
</script>

<style scoped>
.certificate {
  padding-top: 20px;
}
  /*img {*/
    /*width: 80%;*/
    /*margin: 0 auto;*/
  /*}*/
  .zs {
    width: 1200px;
    height: 824.95px;
    background: url('~@/assets/images/user/zsbg.png');
    background-size: cover;
    position: relative;
  }
  .zs-logo {
    position: absolute;
    left: 50%;
    top: 110px;
    transform: translate(-50%,0);
    width: 83px;
  }
  .zs-title {
    text-align: center;
    width: 100%;
    font-size: 48px;
    font-weight: bold;
    color: #22944E;
    line-height: 52px;
    letter-spacing:15px;
    position: absolute;
    top: 180px;
  }
  .zs-nr {
    position: absolute;
    top: 350px;
    left: 50%;
    transform: translate(-50%,0);
    width: 75%;
    font-size: 22px;
    line-height: 50px;
    letter-spacing:2px;
  }
  .zs-nr span {
    display: inline-block;
    text-align: center;
    border-bottom: 1px solid #333;
    font-weight: 700;
    padding: 0 35px;
    margin-left: 2em;
  }
  .zs-dw {
    position: absolute;
    bottom: 200px;
    right: 12.5%;
    font-size: 24px;
    font-weight: 700;
    display: inline-block;
    width: 325px;
    text-align: left;
    letter-spacing:1px;
  }
.zs-time {
  position: absolute;
  bottom: 140px;
  right: 12.5%;
  font-size: 22px;
  display: inline-block;
  width: 325px;
  text-align: left;
  letter-spacing:1px;
}
  .zs-z {
    position: absolute;
    bottom: 90px;
    right: 20%;
    width: 200px;
  }
  .zs-q {
    position: absolute;
    bottom: 94px;
    left: 16%;
  }
</style>
